<template>
  <div class="page has-navbar" v-nav="{title: title, showBackButton: true,onBackButtonClick: back}">
    <div class="page-content padding-top">
      <div v-for="item in checkList">
        <div class="item item-borderless hl-item cars-item check-item clearfix" >
          <div class="hairline-top"></div>
          <router-link :to="'/cars/'+item.carId + '?favorite=1'">
            <div class="cars-img">
              <img :src="imgUrl + item.car.carImageUrl + '.r_400xh_300'" onerror="javascript:this.src='static/images/default.png';">
              <div class="cars-img-span" :data-color="item.detectionState">{{item.detectionState | filterCarDetectStateTwo}}</div>
            </div>
            <div class="cars-info">
              <h2 class="cars-title">{{item.car.carTitle}}</h2>
              <p class="cars-mile">{{item.car.carMileage}}万公里/
                <span >{{item.car.carLicenceDate | filterDateForYear}}</span>
              </p>
              <p  class="cars-mile" style="color:#ff6c21">{{item.car.carVin}}</p>
            </div>
          </router-link>
          <div class="check-right">
            <p v-if="item.detectionState == 10"><a  @click="$router.forward('/check/'+item.detectionId+'?carId='+item.carId)" >检测估值</a>
              <br><a href="http://m.che300.com/pinggu">查询估值</a>
              <br>
              <small>{{item.detectionCreateTime | filterDatefavorite}}</small>
            </p>
            <p v-else style="color:#00B90D;line-height:90px;">复检完成</p>
          </div>
        </div>
        <div class="checker"><img src="static/images/checker.png">{{item.user.userName}} {{item.user.userMobile}} {{item.user.shop.shopName}}</div>
      </div>
         <!-- <item class="item-icon-right" v-for="item in checkList" @click.native="$router.forward('/cars/'+item.carId)">{{item.userName}}<i class="icon ion-ios-arrow-right" style="color: #DDD;"></i></item> -->
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      checkList:[],
      detectionState:'',
      title:'检测单',
      imgUrl:imgUrl,
    }
  },
  created(){
    this.detectionState = this.$route.query.detectionState;
    this.title = this.$route.query.title;

    var _this = this;
    axios.get(baseUrl+'/controller/app/getDetectionList',{params:{
        marketId:sess.get('userSession').marketId,
        detectUserId:sess.get('userSession').userId,
        // detectionState:_this.detectionState, //检测状态 10 待检测 20 已检测
      }
    })
    .then(function(res){
      _this.checkList = res.data.result;
      console.log(_this.checkList)
    })
  },
  methods:{
    back(){
      $router.back('/desk')
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.checker{
  height: 36px;
  background-color: #fff;
  padding: 0 20px;
  padding-bottom: 20px;
  font-size: 12px;
  color: #666;
  line-height: 25px;
}
.checker img{
  height: 18px;
  float: left;
  display: inline-block;
  margin-top: 2px;
  margin-right: 10px;
}
.check-right p{ line-height: 40px;}
.check-right small{ font-size: 12px;}
.cars-img-span{ position: absolute; top: 5px; left: 5px; background: #6EAAE6; padding: 3px 8px; border-radius: 5px; font-size: 12px; color: #fff; }
.cars-img-span[data-color = "20"]{ background: #3DAA51;}

</style>
